<template>
  <div class="giftdetail-container">
    <!-- 顶部导航 -->
    <van-nav-bar title="详情" class="top-nav">
      <template #left>
        <i class="iconfont icon-zuofanhui" @click="$router.go(-1)"></i>
      </template>
      <template #right>
        <i class="iconfont icon-share" @click="showShare = true"></i>
      </template>
    </van-nav-bar>
    <!-- 内容部分 -->
    <div class="content">
      <div class="content-top">
        <h2 class="tit">
          白色恋人
        </h2>
        <div class="grade-msg">
          <div class="blank">
            <van-rate
              size="22px"
              gutter="3px"
              v-model="stars"
              disabled
              disabled-color="#515356"
              class="stars"
            />
            <span class="num">1128</span>
          </div>
          <span class="price">62.0</span>
        </div>
        <div></div>
      </div>
      <div class="content-main">
        <van-image
          :src="require('@/assets/白色恋人.png')"
          fit="contain"
          class="good-pic"
        ></van-image>
        <p class="info">
          白色恋人（しろいこいびと），是北海道札幌市的石屋制果株式会社出产的一种巧克力夹心薄饼。它由两片薄饼（法语:langue
        </p>
        <div class="Btns">
          <!-- 数量选择 -->
          <van-cell
            is-link
            :title="selectNum"
            @click="showselectNum = true"
            class="selectNum"
          />
          <van-action-sheet
            v-model="showselectNum"
            :actions="actions"
            @select="numonSelect"
          />
          <!-- 按钮 -->
          <div class="btn-list">
            <van-button class="like" color="#f0f7fe" @click="switchcolor=!switchcolor">
              <i class="iconfont icon-Like" slot="default" :class="{'likecolor':switchcolor}"></i>
            </van-button>
            <van-button class="guesslike" color="#f0f7fe">
              <span class="text" slot="default">相似对比</span>
            </van-button>
            <van-button class="buy" color="#4a90e2">
              <span class="text" slot="default">购买</span>
            </van-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 分享面板 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="shareonSelect"
    />
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
      showShare: false, // 显示分享
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ], // 分享途径
      stars: 5, // 评分星星
      showselectNum: false,
      selectNum: '已选：2盒',
      actions: [
        { name: '已选：1盒' },
        { name: '已选：2盒' },
        { name: '已选：3盒' }
      ],
      switchcolor:false//控制喜欢按钮激活状态
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    shareonSelect(option) {
      this.$toast(option.name)
      this.showShare = false
    },
    numonSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showselectNum = false
      this.selectNum = item.name
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.likecolor{
  color: red !important;
}
.giftdetail-container {
  // 主要内容
  .content {
    padding: 0 67px;
    .content-top {
      text-align: left;

      .tit {
        font-weight: normal;
        margin: unset;
        font-family: PingFangSC-Regular;
        font-size: 40px;
        color: #484747;
        margin-bottom: 31px;
      }
      .grade-msg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .blank {
          display: flex;
          align-items: center;
          .num {
            margin-left: 15px;
            font-family: PingFang-SC-Heavy;
            font-size: 22px;
            color: #5d5d5d;
          }
        }
        .price {
          font-family: PingFang-SC-Heavy;
          font-size: 22px;
          color: #4da1dd;
        }
      }
    }
    .content-main {
      .good-pic {
        width: 388px;
        height: 402px;
        margin-bottom: 33px;
      }
      .info {
        text-align: left;
        margin: unset;
        font-family: PingFang-SC-Medium;
        font-size: 22px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #6c6c6c;
      }
      .selectNum {
        margin-top: 40px;

        height: 88px;
        background-color: #f7f7f7;
        border-radius: 8px;
      }
      .van-cell__title {
        text-align: left;
        span {
          font-family: PingFang-SC-Medium;
          font-size: 24px;
          color: #999999;
        }
      }
      .btn-list {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        .like {
          width: 130px;
          height: 88px;
          .iconfont {
            color: #7e7e7e;
            font-size: 38px !important;
          }
        }
        .guesslike {
          margin: 0 45px 0 10px;
          width: 260px;
          height: 88px;
          .text {
            font-family: PingFang-SC-Medium;
            font-size: 24px;
            color: #4c4c4c;
          }
        }
        .buy {
          width: 186px;
          height: 88px;
          .text {
            font-family: PingFang-SC-Medium;
            font-size: 24px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
